<template>
    <div id="fashion">
        <header>
            <router-link to="/index">
                <van-icon name="arrow-left" class="i1"/>
            </router-link>
            <h3>项目详情</h3>
        </header>
       <main>
            <van-swipe @change="onChange">
                <van-swipe-item>
                    <img :src="list.subscribeImg" alt="">
                </van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/1</div>
                </template>
          </van-swipe>
                <p class="p1">{{list.serveName}}</p>
                <p class="p2">￥<span>{{list.servePrice}}</span></p>
       </main>
       <footer>
            <router-link to="/index">
                <div>
                    <van-icon name="wap-home-o" class="i2"/>
                    <p>主页</p>
                </div>
        </router-link>
          <button @click="jump(list)">在线预约</button>
       </footer>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Icon } from 'vant';
import { Button } from 'vant';
import axios from 'axios';

Vue.use(Button);
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
    export default {
        data() {
            return {
                current: 0,
                active:0,
                list:[
                    // {
                    //     imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0ad1eb10-2f0d-4a07-8fdc-ad0e02f11edd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697788361&t=3bfdd092ca7547d25b8a4606cb9f8cfe',
                    //     title:'离子烫',
                    //     price:'689',
                    //     id:1,
                    // }
                ]
            };
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            jump(item){
                this.$router.push({path:"/Appointment",query:{item:item}})
            },
            async getList(){
                // console.log(this.$route.query.id,"id");
                let res=await axios({
                    url:"http://192.168.20.106:8000/api/pro/serve?serveId="+this.$route.query.id,
                    method:"get",
                   
                })
                // console.log(res.data.data);
                this.list=res.data.data
            }
        },
        mounted(){
            this.getList()
        }
    }
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
img{
    display: block;
}
#fashion{
    width: 100%;
    height: 100%;
    background: #ccc;
}
header{
    width: 100%;
    height: 44px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.i1{
    font-size: 20px;
    color: #888;
}
h3{
    font-size: 20px;
    font-weight: normal;
    margin-left: 10px;
    color: #888;
}
main{
    width: 100%;
    height: 100%;
    background:#fff;
    padding-top: 44px;
    padding-bottom: 44px;
    box-sizing: border-box;
}
main .p1{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #333;
    font-weight: bolder;
}
main .p2{
    width: 100%;
    color: #f41010;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
}
main .p2 span{
    font-size: 24px;
    font-weight: bolder;
}
#fashion img{
    width: 100%;
    height: 350px;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  footer{
    width: 100%;
    height: 44px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer>div{
    width: 50px;
    text-align: center;
}
footer .i2{
    font-size: 20px;
    color: #333;
}
footer p{
    line-height: 20px;
    height: 20px;
}
button{
    border:none;
    outline: none;
    background: none;
    background-color: #f41010;
    color: #fff;
    text-align: center;
    line-height: 30px;
    height: 30px;
    font-size: 18px;
    width: 300px;
   
    border-radius: 15px;
}
</style>